<template>
  <div class="title">
    <span style="padding-left: 0">{{ title }} </span
    ><span style="border-left: 0.02rem solid #ccc; color: #ccc">{{
      radio
    }}</span>
    <p v-if="button !== undefined">
      <em>{{ button }}</em
      ><i class="iconfont icon-youhuaxiangyougengduo"></i>
    </p>
  </div>
</template>

<script>
export default {
  props: ["title", "button", "radio"],
};
</script>

<style lang="less" scoped>
.title {
  height: 0.44rem;
  padding-right: 0.3rem;
  margin-bottom: 0.33rem;
  span {
    font-size: 0.35rem;
    font-weight: 700;
    padding: 0 0.2rem;
    display: inline-block;
  }
  p {
    padding: 0.11rem 0.17rem 0.09rem 0.19rem;
    float: right;
    font-size: 0.22rem;
    box-sizing: border-box;
    border: 0.01rem solid #ececec;
    border-radius: 0.24rem;
    line-height: 0.19rem;
    i {
      vertical-align: middle;
      &::before {
        display: inline-block;
        font-size: 0.18rem;
      }
    }
  }
}
</style>